<template>
  <n-modal
      v-model:show="props.modalData.show"
      class="custom-card"
      preset="card"
      :style="{ width: '1200px' }"
      title="素材中心"
      header-style="padding: 15px 24px"
      footer-style="padding: 15px 24px"
      :bordered="false"
      :segmented="{
      content: 'hard',
      footer: 'hard'
    }"
  >
    <div class="search">
      <n-space justify="space-between">
        <n-space align="center">
          <n-button type="primary" style="width: 185px" @click="addMedia"> 添加图片</n-button>
          <n-checkbox
              :checked="isCheckedAll"
              :disabled="mediaStore.mediaList.length === 0"
              @click="checkAll"
              style="margin-left: 10px"
          >
            全选当前页
          </n-checkbox>
        </n-space>
        <n-input-group>
          <n-input
              v-model:value="queryParam.mediaName"
              placeholder="输入文件名查询"
              clearable
          />
          <n-button type="primary" ghost @click="queryMediaByPage(1)">搜索</n-button>
        </n-input-group>
      </n-space>
    </div>
    <div class="content">
      <n-space vertical style="width: 185px">
        <div class="group__search">
          <n-input v-model:value="searchGroupValue" clearable type="text" placeholder="请输入分组关键词"></n-input>
        </div>
        <div class="group">
          <div class="group__list">
            <div
                v-for="item in groupList"
                :key="item.id"
                :class="['group__item', { active: queryParam.groupId === item.id }]"
                @click="clickGroup(item.id)"
            >
              {{ item.groupName }}（{{ item.mediaNum }}）
            </div>
          </div>
        </div>
      </n-space>

      <div class="library">
        <n-checkbox-group v-model:value="checkedList">
          <ul v-if="mediaStore.mediaList[0]" class="library-list">
            <li v-for="item in mediaStore.mediaList" :key="item.id" class="library-item">
              <div class="library-item-inner">
                <div class="cover-box">
                  <n-checkbox class="checkbox" :value="item.mediaUrl" style="width: 100%">
                    <div class="cover">
                      <img :src="item.mediaUrl"/>
                    </div>
                  </n-checkbox>
                  <div class="btns-bar">
                    <n-icon-wrapper :size="20" @click="preview(item.mediaUrl)">
                      <n-icon>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 32 32">
                          <path
                              d="M29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29zM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9z"
                              fill="currentColor"></path>
                        </svg>
                      </n-icon>
                    </n-icon-wrapper>
                  </div>
                </div>
                <div class="info-box">
                  <p class="info-size">
                      <span class="name ellipsis" :title="item.mediaName">
                        {{ item.mediaName }}
                      </span>
                    <span class="ellipsis" title="2021/7/6">{{ item.createdAt }}</span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
          <x-empty v-else class="empty" description="暂无数据"></x-empty>
        </n-checkbox-group>
        <n-pagination v-if="mediaStore.mediaList[0]" v-model:page="mediaStore.pageInfo.pageNum" :page-count="mediaStore.pageInfo.totalPage"
                      :on-update:page="queryMediaByPage"/>
      </div>
    </div>
    <template #footer>
      <n-space align="center" justify="space-between">
        <div>
          <template>
            已选择
            <n-text depth="3">{{ checkedList.length }}/{{ 9 }}个</n-text>
          </template>
        </div>
        <div>
          <x-button @click="close">取消</x-button>
          <x-button :disabled="disabledConfirm" type="primary" @click="confirm">确定</x-button>
        </div>
      </n-space>
    </template>

    <!--预览图片-->
    <n-modal
        v-model:show="showPreviewModal"
        preset="card"
        title="预览"
        :bordered="false"
        header-style="padding: 15px 24px"
        :style="{ width: '520px' }"
    >
      <div class="flex center">
        <n-image class="preview-img" :src="previewUrl"/>
      </div>
    </n-modal>
  </n-modal>
</template>

<script setup>
import {
  NButton,
  NCheckbox,
  NCheckboxGroup,
  NIcon,
  NIconWrapper,
  NImage,
  NInput,
  NInputGroup,
  NModal,
  NPagination,
  NSpace,
  NText,
} from 'naive-ui'
import {computed, reactive, ref, watch} from "vue";
import {useMediaStore} from "@/store/media";
import XButton from '@/components/x-button.vue'
import XEmpty from '@/components/x-empty.vue'

const emits = defineEmits(['success'])
const props = defineProps({
  modalData: {
    type: Object,
    required: true
  }
})
const searchGroupValue = ref('')
const checkedList = ref([])
const queryParam = reactive({
  groupId: 1,
  mediaName: '',
  pageNum: 1,
  pageSize: 15,
})
const mediaInfo = ref({show: false, groupId: queryParam.groupId})

const mediaStore = useMediaStore()
const groupList = computed(() => {
  const query = searchGroupValue.value.trim()
  if (!query) {
    return mediaStore.mediaGroupList
  }
  return mediaStore.mediaGroupList.filter((item) => item.groupName.toLocaleLowerCase().includes(query.toLocaleLowerCase()))
})
const isCheckedAll = computed(() => mediaStore.mediaList.length > 0 && mediaStore.mediaList.length === checkedList.value.length)
const disabledConfirm = computed(() => checkedList.value.length === 0)

async function clickGroup(groupId) {
  queryParam.groupId = groupId
  queryParam.pageNum = 1
  await queryMedia()
}

async function queryMedia() {
  await mediaStore.loadMediaList(queryParam)
}

async function queryMediaByPage(page) {
  queryParam.pageNum = page
  await queryMedia()
}

function addMedia() {
  mediaInfo.value.show = true;
  mediaInfo.value.groupId = queryParam.groupId
}

const showPreviewModal = ref(false)
const previewUrl = ref('')

function preview(url) {
  showPreviewModal.value = true
  previewUrl.value = url
}

function checkAll() {
  if (isCheckedAll.value) {
    checkedList.value = []
  } else {
    checkedList.value = mediaStore.mediaList.map(item => item.mediaUrl)
  }
}

function confirm() {
  if (checkedList.value.length === 0) {
    return message.warning(`请选择图片`)
  }
  emits("success", checkedList.value)
  checkedList.value = []
}

function close() {
  props.modalData.show = false
}

watch(() => props.modalData.show, async (value, oldValue) => {
  if (value) {
    await mediaStore.loadMediaGroupList()
    await queryMedia()
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/styles/var';

* {
  box-sizing: border-box;
}

ol, ul, li {
  list-style: none;
}

.search {
  margin-bottom: 20px;
}

.content {
  display: flex;
  margin-top: 18px;

  .group {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 490px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #dfe3ed, 0 2px 5px 0 rgb(0 26 91 / 10%);

    &__list {
      flex: 1;
      overflow-y: scroll;
    }

    &__item {
      padding: 15px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      cursor: pointer;

      &:hover {
        color: $primaryColor;
        transition: all 0.3s;
      }

      &.active {
        background: $primaryColor;
        color: #ffffff;
      }

      &.add {
        text-align: center;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
        background: #ffffff;
        color: $primaryColor;
      }
    }
  }

  .library {
    flex: 1;
    margin-left: 20px;

    &-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      grid-gap: 10px;
      width: 100%;
      grid-template-rows: 152px 152px 152px;
      padding: 0;
    }

    &-item {
      position: relative;
      min-height: 150px;

      &-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        box-shadow: 0 0 0 1px #dfe3ed, 0 2px 5px 0 rgb(0 26 91 / 10%);
        border-radius: 6px;

        &:hover {
          box-shadow: 0 0 0 2px $primaryColor, 0 2px 5px 0 rgb(0 26 91 / 10%);

          .checkbox {
            :deep(.n-checkbox-box) {
              opacity: 1;
            }
          }
        }

        .cover-box {
          width: 100%;
          padding-bottom: 67.25%;
          height: 0;
          position: relative;
          cursor: pointer;

          .cover {
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            border-bottom: 1px solid #dfe3ed;
            background-color: #f8f9fa;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;

            img,
            video {
              width: 100%;
              height: 100%;
              object-fit: contain;
              border-radius: 2px 2px 0 0;
            }

            &.selected {
              &:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                border: 17px solid $primaryColor;
                border-bottom-color: transparent;
                border-right-color: transparent;
                color: #fff;
              }

              &:after {
                content: '';
                display: block;
                width: 5px;
                height: 12px;
                position: absolute;
                left: 7px;
                top: 0;
                border: 2px solid #fff;
                border-top-color: transparent;
                border-left-color: transparent;
                transform: rotate(45deg);
              }
            }
          }

          .btns-bar {
            position: absolute;
            right: 2px;
            bottom: 2px;

            .icon {
              width: 22px;
              height: 22px;
              border-radius: 4px;
              display: grid;
              align-items: center;
              justify-content: center;
              background: rgba(0, 0, 0, 0.4);
            }
          }
        }

        .info-box {
          padding: 0 10px;
          height: 28px;
          display: flex;
          align-items: center;
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;

          .info-size {
            display: flex;
            width: 100%;
            justify-content: space-between;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.5);

            .name {
              flex: 1;
              margin-right: 30px;
              color: #313233;
            }
          }
        }
      }
    }
  }
}

.empty {
  margin-top: 200px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  padding: 20px 10px 0;
}

.checkbox {
  :deep(.n-checkbox-box) {
    z-index: 1;
    position: absolute;
    left: 6px;
    top: 10px;
    opacity: 0;
    transition: all 0.2s ease;
  }

  &[aria-checked='true'] {
    :deep(.n-checkbox-box) {
      opacity: 1;
    }
  }
}
</style>
